import React from 'react';


const FancyInput = React.forwardRef((props,refInput)=>{
    console.log('FancyInput-props',props)
    return <input ref={refInput} {...props}/>
})

function logProps(WrappedComponent) {
    //console.log('WrappedComponent',WrappedComponent)
    class LogProps extends React.Component {
        componentDidUpdate(prevProps) {
            console.log('old props:', prevProps);
            console.log('new props:', this.props);
        }

        render() {
            //console.log('this.props',this.props)
            const {forwardedRef, ...rest} = this.props;
            console.log('forwardedRef',forwardedRef)

            return <WrappedComponent ref={forwardedRef} {...rest} name='tianxia'/>;
        }
    }

    //return LogProps;
    return React.forwardRef((props, ref) => {
        return <LogProps {...props} forwardedRef={ref} />;
    });
}


// export default logProps(FancyInput);

const EnhancedFancyInput = logProps(FancyInput);

class HocLogPropsDemo extends React.Component { 
    constructor(props) {
        super(props);
        this.buttonRef = React.createRef();
    }

    handleClick = () => {
        if(this.buttonRef.current) {
            console.log('this.buttonRef.current',this.buttonRef.current)
            this.buttonRef.current.focus();
        }
    }

    render() {
        return (
            <div>
                <EnhancedFancyInput ref = { this.buttonRef } placeholder='请输入内容'/>
                <button onClick = { this.handleClick }>点击</button>
            </div>
        )
    }
}

export default HocLogPropsDemo;